<template>
  <div class="header">
    <!--头部顶部-->
    <div class="header-top">
      <div class="header-left floatLeft">
        <ul>
          <li v-for="(item,key) in headerList" class="linkBlock">{{item}}</li>
        </ul>
      </div>
      <div class="header-center floatLeft">KICKSTARTER</div>
      <div class="header-right floatLeft"><span class="block cricle"><span class="linkBlock"></span></span></div>
      <div class="clear"></div>
    </div>
    <!--头部底部-->
    <div class="header-bottom">
      <!--帮助规则部分-->
      <div class="header-help">
        <ul>
          <li v-for="(item,key) in helpList" :key="key" class="linkBlock">{{item}}</li>
        </ul>
      </div>
      <!--按钮选择部分-->
      <div class="chooseBtn">
        <input type="button" class="exit" value="Exit editor"/>
        <span class="classifyBtn linkBlock">
          <button v-for="(item,key) in buttonList" :key="key" @click="clickBtn(key)" :class="{ chooseColor:chooseColor[key], lastColor:lastColor[key]}">{{item}}</button>
        </span>
        <button class="preview" @click="toPreview" :class="{previewColor:isColor}">Preview</button>
      </div>
      <!--start开始部分-->
      <div class="start">
        <span class="start-title block">{{title}}</span>
        <span class="start-text block">{{text}}</span>
      </div>
      <!--share部分-->
      <div class="share">
        <span><a href="javascript:(viod)">{{shareA}}</a>{{shareTxt}}</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "set-header",
        props:[ "text", "title", "shareA", "shareTxt", 'chooseColor', 'isColor', 'lastColor'],
        data(){
            return {
              headerList:[ 'Creator Handbook', 'Campus', 'Help', 'Project Rules' ],
              helpList:[ 'Creator Handbook', 'Help', 'Our Rules' ],
              buttonList:[ 'Basics', 'Rewards', 'Story', 'About you', 'Account' ],
            }
        },
        methods:{
          clickBtn(key){
              this.chooseColor[key] = true;

              if(key == 0){
                this.$router.push({path:'/setYourBascis'});
              }
              if(key == 1){
                this.$router.push({path:'/setYourRewards'});
              }
              if(key == 2){
                this.$router.push({path:'/story'});
              }
              if(key == 3){
                this.$router.push({path:'/aboutYou'});
              }
              if(key == 4){
                this.$router.push({path:'/account'});
              }
            },
            toPreview(){
              this.$router.push({path:'/preview'});
            }
        },
    }
</script>

<style scoped lang="scss">
  .clear{clear: both}
  .floatLeft{float: left}
  .linkBlock{display: inline-block}
  .block{display: block}
  input,button{outline: none}
  /*头部顶部*/
  .header-top{
    font-size: 14px;
    line-height:60px;
    color: #2E2E2E;
    position: relative;
    .header-left{
      font-family: PingFangSC-Regular;
      margin-right:197px;
      li:nth-child(1){margin:0 44px 0 24px;}
      li:nth-child(2){margin-right:47px}
      li:nth-child(3){margin-right: 48px}
    }
    .header-center{
      font-family: Phosphate-Solid;
      font-size: 24px;
      margin-right: 590px;
    }
    .header-right{
      .cricle{
        width: 84px;
        height: 60px;
        background: #F7F7F9;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        span{
          width: 34px;
          height: 37px;
          border-radius: 50%;
          background-color: brown;
          margin-top: 14px;
        }
      }

    }
  }
  /*头部底部*/
  .header-bottom{
    background-color:#DBDEDD;
    height: 370px;
    font-family: Arial-BoldMT;
    font-size: 14px;
    color: #2E2E2E;
    letter-spacing: -0.4px;
    /*帮助规则部分*/
    .header-help{
      margin: 0 0px 11px 1124px;
      padding-top: 22px;
      li{margin-right: 43px}
      li:nth-child(3){margin-right: 0;}
    }
    /*按钮部分*/
    .chooseBtn{
      font-family: PingFangSC-Medium;
      font-size: 14px;
      .exit{
        background: #000000;
        border: 1px solid #DAD7D5;
        border-radius: 2px;
        width: 122px;
        height: 63px;
        font-family: ArialMT;
        color: #FFFFFF;
        letter-spacing: 0.2px;
        margin:0 16px 0 317px;
        vertical-align: middle;
      }
      .classifyBtn{
        height: 60px;
        border: 1px solid #DAD7D5;
        overflow: hidden;
        vertical-align: middle;
        color: #3D3E63;
        letter-spacing: -0.2px;
          button{
            display: inline-block;
            width:104px;
            height: 60px;
            background: #FFFFFF;
            border: 1px solid #DAD7D5;
            border-radius: 2px;
            outline: none;
          }
        .chooseColor{
          background: #F6F6F6;
          color: #2C59F6;
        }
        .lastColor{
          background: #F6F6F6;
          color: #3D3E63;
        }
      }
      .preview{
        width: 95px;
        height: 63px;
        background: #FFFFFF;
        border: 2px solid #DAD7D5;
        border-radius: 2px;
        margin-left: 35px;
        color: #3D3E63;
        letter-spacing: -0.2px;
        font-size: 14px;
      }
      .previewColor{
        color: #2C59F6;
        background-color: transparent;
      }

    }
    /*开始部分*/
    .start{
      width: 1440px;
      text-align: center;
      .start-title{
        font-family: PingFangSC-Semibold;
        font-size: 30px;
        color: #2E2E2E;
        margin: 68px 0 14px 0;
      }
      .start-text{
        width:920px;
        font-family: ArialMT;
        font-size: 22px;
        color: #2E2E2E;
        letter-spacing: 0.4px;
        line-height: 30px;
        margin: 0 auto;
      }
    }
  }
  .share{
    width: 1002px;
    line-height: 62px;
    background: #F7DDAA;
    margin-left: 219px;
    text-align: center;
    margin-top: -29px;
    font-family: ArialMT;
    font-size: 14px;
    letter-spacing: 0.2px;
    a{
      color: #2C59F6;
    }
  }



</style>
